<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Promise</title>
</head>
<body>
<script>

  /*
  *使用Promise是如何避免回调地狱的呢？
  * 传统的基于回调函数的操作之所以会产生回调地狱的问题是因为操作直接将值传递给回调函数的参数
  * 这就会造成回调函数和操作产生耦合的现象
  *
  * 而Promise巧妙地将操作的值定义在Promise的reason/value属性上 所以获取值不需要使用回调函数了
  * 可以直接使用实例方法来获取值
  *
  * 其本质不过是resolve/reject执行的时候将值保存在对象上然后then方法通过回调函数将值传出来
  *
  *
  * */

  /*
  * 获取成功状态的结果
  *
  * */

  /*
  * new Promise构造函数其实是想接收传入的值，但是这里设计的很有意思，一般让我们为来设计的话可能会直接new Promise()通过构造函数传值，但是这样会有一个问题，就是
  * 传值的话只能创建对象传值，使用不太方便，要传值就new ,使用函数传值的话很方便，什么时候想传值就调用函数就行，这里也给我们一个启发，之前都是通过高阶函数将值传过来
  * 而这里更加高阶 高阶函数传递一个函数 函数再传值，所以以后我们的函数要接收值不要只想到定义函数参数接收，也可以将函数参数定义为函数来接受
  *
  * */
  new _Promise(((resolve, reject) => {
    setTimeout(()=>{
      console.log(1);
      resolve(2)
    })
  })).then(result =>{
    console.log(result);
  })

  /*
  * 获取失败状态的结果
  *
  * */
  new _Promise(((resolve, reject) => {
    setTimeout(()=>{
      console.log(2);
      reject(3)
    })
  })).catch(err =>{
    console.log(err);
  })

  /*
 * 同时获取成功和失败状态
 *
 * */
  new _Promise(((resolve, reject) => {
    setTimeout(()=>{
      console.log(1);
      resolve(2)
    })
  })).then(result =>{
    console.log(result);
  },err =>{
    console.log(err);
  })

  /*
  * 使用finally传递结果 没有参数 只是传递一下结果
  *
  * */

  new _Promise(((resolve, reject) => {
    setTimeout(()=>{
     reject("fail")
    })
  })).finally(()=>{
    console.log("finally");
  }).then(value => {
    console.log(value);
  }).catch(reason => {
    console.log(reason);
  })
</script>
</body>
</html>